<template>
  <header class="header-box">
    <div>
      <i class="el-icon-s-fold"></i>
    </div>
    <div>菜单</div>
    <div class="header-user">
      <i class="el-icon-s-custom"></i>
      <span class="header-user-name">{{userInfo.name}}</span>
    </div>
  </header>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import {useStore} from 'vuex';

export default defineComponent({
  name: 'HelloWorld',
  setup () {
    const store = useStore();
    const userInfo = computed(() => {
      const info = store.getters['global/GET_USERINFO'];
      return info || {};
    })
    return {userInfo}
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.header-box {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  padding-right: 20px;
}
.header-user {
  &-name {
    padding: 3px 6px;
  }
}
</style>
